<template>
  <div>
    <a-config-provider :locale="locale">
      <div style="font-size: 14pt; margin-bottom: 10px"><span class="fontWightStyle">编号：</span>{{ formData.applyCode.componentProp.defaultValue }}</div>
      <div style="font-size: 18pt; text-align: center; font-weight: bold; margin-bottom: 4px">
        中电信翼康科技有限公司
      </div>
      <div style="font-size: 18pt; text-align: center; font-weight: bold; margin-bottom: 30px">
        发跨月发票红冲及新开申请表
      </div>
      <div style="color: #999; text-align: center">（每月16日进行当月票据红冲及重开业务）</div>
      <a-form ref="vForm" :model="formData" hideRequiredMark>

        <table border="1" cellspacing="0" cellpadding="0" style="width: 100%" class="yk_table">
          <tr>
            <td class="fontWightStyle">申请部门</td>
            <td>
              <a-form-item :label="formData.applyUserDeptName.label" class="hideLabel formTimedisplay" :name="[
                formData.applyUserDeptName.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.applyUserDeptName.componentProp.hidden" :rules="formData.applyUserDeptName.rules">
                <a-input v-model:value="formData.applyUserDeptName.componentProp.defaultValue"
                  :disabled="formData.applyUserDeptName.componentProp.disabled"
                  :placeholder="formData.applyUserDeptName.componentProp.placeholder" />
              </a-form-item>
            </td>
            <td class="fontWightStyle" style="width: 70px">申请人</td>
            <td>
              <a-form-item :label="formData.applyUserName.label" class="hideLabel" :name="[
                formData.applyUserName.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.applyUserName.componentProp.hidden" :rules="formData.applyUserName.rules">
                <a-input v-model:value="formData.applyUserName.componentProp.defaultValue
                  " :disabled="formData.applyUserName.componentProp.disabled" :placeholder="formData.applyUserName.componentProp.placeholder
    " />
              </a-form-item>
            </td>
            <td class="fontWightStyle" style="width: 80px">申请时间</td>
            <td>
              <a-form-item :label="formData.applyTime.label" class="hideLabel"
                :name="[formData.applyTime.field, 'componentProp', 'defaultValue']"
                v-if="!formData.applyTime.componentProp.hidden" :rules="formData.applyTime.rules">
                <a-date-picker style="width: 100%" v-model:value="formData.applyTime.componentProp.defaultValue"
                  :disabled="formData.applyTime.componentProp.disabled"
                  :placeholder="formData.applyTime.componentProp.placeholder" type="date" value-format="YYYY-MM-DD"
                  format="YYYY年MM月DD日" />
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td rowspan="4" class="fontWightStyle">项目相关</td>
            <td colspan="3">
              <a-form-item :label="formData.projectName.label"  :name="[
                formData.projectName.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.projectName.componentProp.hidden" :rules="formData.projectName.rules">
                <a-textarea auto-size v-model:value="formData.projectName.componentProp.defaultValue
                  " :disabled="formData.projectName.componentProp.disabled" :placeholder="formData.projectName.componentProp.placeholder
    " />
              </a-form-item>
            </td>
            <td colspan="2">
              <a-form-item :label="formData.projectCode.label"  :name="[
                formData.projectCode.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.projectCode.componentProp.hidden" :rules="formData.projectCode.rules">
                <a-input v-model:value="formData.projectCode.componentProp.defaultValue
                  " :disabled="formData.projectCode.componentProp.disabled" :placeholder="formData.projectCode.componentProp.placeholder
    " />
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <a-form-item :label="formData.contractCode.label"  :name="[
                formData.contractCode.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.contractCode.componentProp.hidden" :rules="formData.contractCode.rules">
                <a-input v-model:value="formData.contractCode.componentProp.defaultValue
                  " :disabled="formData.contractCode.componentProp.disabled" :placeholder="formData.contractCode.componentProp.placeholder
    " />
              </a-form-item>
            </td>
            <td colspan="2"><span class="fontWightStyle">结算类型：</span>收入型</td>
            
          </tr>
          <tr>
            <td colspan="3">
              <a-form-item :label="formData.contractTaxRate.label"
                :name="[formData.contractTaxRate.field, 'componentProp', 'defaultValue']"
                v-if="!formData.contractTaxRate.componentProp.hidden" :rules="formData.contractTaxRate.rules">
                <a-input-number :min='0' v-model:value="formData.contractTaxRate.componentProp.defaultValue"
                  :disabled="formData.contractTaxRate.componentProp.disabled"
                  :placeholder="formData.contractTaxRate.componentProp.placeholder"/>
              </a-form-item>
            </td>
            <td colspan="2">
              <a-form-item :label="formData.contractContainPrice.label"  :name="[
                formData.contractContainPrice.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.contractContainPrice.componentProp.hidden" :rules="formData.contractContainPrice.rules">
                <a-input-number :min="0" v-model:value="formData.contractContainPrice.componentProp.defaultValue
                  " :disabled="formData.contractContainPrice.componentProp.disabled" :placeholder="formData.contractContainPrice.componentProp.placeholder
    " />
              </a-form-item>
            </td>
            
          </tr>
          <tr>
            <td colspan="3">
              <a-form-item :label="formData.contractExcludingPrice.label"  :name="[
                formData.contractExcludingPrice.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.contractExcludingPrice.componentProp.hidden" :rules="formData.contractExcludingPrice.rules">
                <a-input-number :min="0" v-model:value="formData.contractExcludingPrice.componentProp.defaultValue
                  " :disabled="formData.contractExcludingPrice.componentProp.disabled" :placeholder="formData.contractExcludingPrice.componentProp.placeholder
    " />
              </a-form-item>
            </td>
            <td colspan="2">
              <a-form-item :label="formData.taxesPrice.label"
                :name="[formData.taxesPrice.field, 'componentProp', 'defaultValue']"
                v-if="!formData.taxesPrice.componentProp.hidden" :rules="formData.taxesPrice.rules">
                <a-input-number :min='0' v-model:value="formData.taxesPrice.componentProp.defaultValue"
                  :disabled="formData.taxesPrice.componentProp.disabled"
                  :placeholder="formData.taxesPrice.componentProp.placeholder"/>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td rowspan="2" class="fontWightStyle">原发票详情</td>
            <td colspan="3">
              <a-form-item :label="formData.ticketName.label"
                :name="[formData.ticketName.field, 'componentProp', 'defaultValue']"
                v-if="!formData.ticketName.componentProp.hidden" :rules="formData.ticketName.rules">
                <a-textarea auto-size v-model:value="formData.ticketName.componentProp.defaultValue"
                  :disabled="formData.ticketName.componentProp.disabled"
                  :placeholder="formData.ticketName.componentProp.placeholder"/>
              </a-form-item>
            </td>
            <td colspan="2">
              <a-form-item :label="formData.invoiceNumber.label"
                :name="[formData.invoiceNumber.field, 'componentProp', 'defaultValue']"
                v-if="!formData.invoiceNumber.componentProp.hidden" :rules="formData.invoiceNumber.rules">
                <a-input v-model:value="formData.invoiceNumber.componentProp.defaultValue"
                  :disabled="formData.invoiceNumber.componentProp.disabled"
                  :placeholder="formData.invoiceNumber.componentProp.placeholder"/>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <a-form-item :label="formData.invoiceDate.label"
                :name="[formData.invoiceDate.field, 'componentProp', 'defaultValue']"
                v-if="!formData.invoiceDate.componentProp.hidden" :rules="formData.invoiceDate.rules">
                <a-date-picker style="width: 100%" v-model:value="formData.invoiceDate.componentProp.defaultValue"
                  :disabled="formData.invoiceDate.componentProp.disabled"
                  :placeholder="formData.invoiceDate.componentProp.placeholder" type="date" value-format="YYYY-MM-DD"
                  format="YYYY年MM月DD日" />
              </a-form-item>
            </td>
            <td colspan="2">
              <a-form-item :label="formData.issuedAmount.label"
                :name="[formData.issuedAmount.field, 'componentProp', 'defaultValue']"
                v-if="!formData.issuedAmount.componentProp.hidden" :rules="formData.issuedAmount.rules">
                <a-input-number :min='0' v-model:value="formData.issuedAmount.componentProp.defaultValue"
                  :disabled="formData.issuedAmount.componentProp.disabled"
                  :placeholder="formData.issuedAmount.componentProp.placeholder"/>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td  class="fontWightStyle">红冲类型</td>
            <td colspan="5">
              <a-form-item
                :label="formData.redFlushType.label"
                class="hideLabel"
                :name="[
                  formData.redFlushType.field,
                  'componentProp',
                  'defaultValue',
                ]"
                v-if="!formData.redFlushType.componentProp.hidden"
                :rules="formData.redFlushType.rules"
              >
                <a-radio-group
                  v-model:value="formData.redFlushType.componentProp.defaultValue"
                  :disabled="formData.redFlushType.componentProp.disabled"
                  :placeholder="formData.redFlushType.componentProp.placeholder"
                  :options="formData.redFlushType.componentProp.option"
                >
                </a-radio-group>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td class="fontWightStyle">红冲附件</td>
            <td colspan="5">
              <span style="color: red">红冲及重开原因，若红冲类型为我方原因，需要上传部门领导签字上传的说明文件。</span>
            </td>
          </tr>
          <tr>
            <td colspan="6" class="fontStyle">发票重开详情</td>
          </tr>
          <tr>
            <td rowspan="4" class="fontWightStyle">结算相关</td>
            <td colspan="3">
              <a-form-item :label="formData.payerName.label"  :name="[
                formData.payerName.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.payerName.componentProp.hidden" :rules="formData.payerName.rules">
                <a-textarea auto-size v-model:value="formData.payerName.componentProp.defaultValue
                  " :disabled="formData.payerName.componentProp.disabled" :placeholder="formData.payerName.componentProp.placeholder
    " />
              </a-form-item>
            </td>
            <td colspan="2">
              <a-form-item :label="formData.settlementAmount.label"  :name="[
                formData.settlementAmount.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.settlementAmount.componentProp.hidden" :rules="formData.settlementAmount.rules">
                <a-input-number :min="0" v-model:value="formData.settlementAmount.componentProp.defaultValue
                  " :disabled="formData.settlementAmount.componentProp.disabled" :placeholder="formData.settlementAmount.componentProp.placeholder
    " />
              </a-form-item>
            </td>
          </tr>
          <tr>
            
            <td colspan="3">
              <a-form-item :label="formData.invoiceTaxRate.label"  :name="[
                formData.invoiceTaxRate.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.invoiceTaxRate.componentProp.hidden" :rules="formData.invoiceTaxRate.rules">
                <a-input-number :min="0" v-model:value="formData.invoiceTaxRate.componentProp.defaultValue
                  " :disabled="formData.invoiceTaxRate.componentProp.disabled" :placeholder="formData.invoiceTaxRate.componentProp.placeholder
    " />
              </a-form-item>
            </td>
            <td colspan="2">
              <a-form-item :label="formData.settlementExcludingAmount.label"  :name="[
                formData.settlementExcludingAmount.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.settlementExcludingAmount.componentProp.hidden" :rules="formData.settlementExcludingAmount.rules">
                <a-input-number :min="0" v-model:value="formData.settlementExcludingAmount.componentProp.defaultValue
                  " :disabled="formData.settlementExcludingAmount.componentProp.disabled" :placeholder="formData.settlementExcludingAmount.componentProp.placeholder
    " />
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <a-form-item :label="formData.thisSettlementTax.label"
                :name="[formData.thisSettlementTax.field, 'componentProp', 'defaultValue']"
                v-if="!formData.thisSettlementTax.componentProp.hidden" :rules="formData.thisSettlementTax.rules">
                <a-input-number :min='0' v-model:value="formData.thisSettlementTax.componentProp.defaultValue"
                  :disabled="formData.thisSettlementTax.componentProp.disabled"
                  :placeholder="formData.thisSettlementTax.componentProp.placeholder"/>
              </a-form-item>
            </td>
            <td colspan="2">
              <a-form-item :label="formData.commonIncluding.label"  :name="[
                formData.commonIncluding.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.commonIncluding.componentProp.hidden" :rules="formData.commonIncluding.rules">
                <a-input-number :min="0" v-model:value="formData.commonIncluding.componentProp.defaultValue
                  " :disabled="formData.commonIncluding.componentProp.disabled" :placeholder="formData.commonIncluding.componentProp.placeholder
    " />
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <a-form-item :label="formData.commonExcluding.label"  :name="[
                formData.commonExcluding.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.commonExcluding.componentProp.hidden" :rules="formData.commonExcluding.rules">
                <a-input-number :min="0" v-model:value="formData.commonExcluding.componentProp.defaultValue
                  " :disabled="formData.commonExcluding.componentProp.disabled" :placeholder="formData.commonExcluding.componentProp.placeholder
    " />
              </a-form-item>
            </td>
            <td colspan="2">
              <a-form-item :label="formData.settlementTax.label"
                :name="[formData.settlementTax.field, 'componentProp', 'defaultValue']"
                v-if="!formData.settlementTax.componentProp.hidden" :rules="formData.settlementTax.rules">
                <a-input-number :min='0' v-model:value="formData.settlementTax.componentProp.defaultValue"
                  :disabled="formData.settlementTax.componentProp.disabled"
                  :placeholder="formData.settlementTax.componentProp.placeholder"/>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td colspan="1" class="fontWightStyle">开票相关附件</td>
            <td colspan="5" class="fontStyle"><div style="color: red; text-align: left">（客户方提供的验收报告或付款通知书）</div></td>
          </tr>
          
          <tr>
            <td colspan="3" >
              <a-form-item :label="formData.householdName.label"
                :name="[formData.householdName.field, 'componentProp', 'defaultValue']"
                v-if="!formData.householdName.componentProp.hidden" :rules="formData.householdName.rules">
                <a-input v-model:value="formData.householdName.componentProp.defaultValue"
                  :disabled="formData.householdName.componentProp.disabled"
                  :placeholder="formData.householdName.componentProp.placeholder"/>
              </a-form-item>
            </td>
            <td colspan="3" >
              <a-form-item :label="formData.openingBank.label"
                :name="[formData.openingBank.field, 'componentProp', 'defaultValue']"
                v-if="!formData.openingBank.componentProp.hidden" :rules="formData.openingBank.rules">
                <a-input v-model:value="formData.openingBank.componentProp.defaultValue"
                  :disabled="formData.openingBank.componentProp.disabled"
                  :placeholder="formData.openingBank.componentProp.placeholder"/>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td colspan="3" >
              <a-form-item :label="formData.bankNumber.label"
                :name="[formData.bankNumber.field, 'componentProp', 'defaultValue']"
                v-if="!formData.bankNumber.componentProp.hidden" :rules="formData.bankNumber.rules">
                <a-input v-model:value="formData.bankNumber.componentProp.defaultValue"
                  :disabled="formData.bankNumber.componentProp.disabled"
                  :placeholder="formData.bankNumber.componentProp.placeholder"/>
              </a-form-item>
            </td>
            <td colspan="3" >
              <a-form-item :label="formData.bankAddress.label"
                :name="[formData.bankAddress.field, 'componentProp', 'defaultValue']"
                v-if="!formData.bankAddress.componentProp.hidden" :rules="formData.bankAddress.rules">
                <a-input v-model:value="formData.bankAddress.componentProp.defaultValue"
                  :disabled="formData.bankAddress.componentProp.disabled"
                  :placeholder="formData.bankAddress.componentProp.placeholder"/>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td colspan="3" >
              <a-form-item :label="formData.registrationNumber.label"
                :name="[formData.registrationNumber.field, 'componentProp', 'defaultValue']"
                v-if="!formData.registrationNumber.componentProp.hidden" :rules="formData.registrationNumber.rules">
                <a-input v-model:value="formData.registrationNumber.componentProp.defaultValue"
                  :disabled="formData.registrationNumber.componentProp.disabled"
                  :placeholder="formData.registrationNumber.componentProp.placeholder"/>
              </a-form-item>
            </td>
            <td colspan="3" >
              <a-form-item :label="formData.phone.label"
                :name="[formData.phone.field, 'componentProp', 'defaultValue']"
                v-if="!formData.phone.componentProp.hidden" :rules="formData.phone.rules">
                <a-input v-model:value="formData.phone.componentProp.defaultValue"
                  :disabled="formData.phone.componentProp.disabled"
                  :placeholder="formData.phone.componentProp.placeholder"/>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td colspan="6" class="fontStyle">审批详情</td>
          </tr>
          <tr>
            <td class="fontWightStyle">项目/部门经理复核意见</td>
            <td colspan="5">
              <a-form-item style="margin-bottom: 10px" :label="formData.projectManagerContent.label"
                class="hideLabel" :name="[
                  formData.projectManagerContent.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.projectManagerContent.componentProp.hidden"
                :rules="formData.projectManagerContent.rules">
                <a-textarea v-model:value="formData.projectManagerContent.componentProp.defaultValue"
                  :disabled="formData.projectManagerContent.componentProp.disabled"
                  :placeholder="formData.projectManagerContent.componentProp.placeholder" />
              </a-form-item>
              <div style="float: right; margin-top: 10px;">
                <a-row :gutter="16">
                  <a-col :span="12">
                    <a-form-item label="签字：" :name="[
                      formData.projectManagerSign.field,
                      'componentProp',
                      'defaultValue',
                    ]" v-if="!formData.projectManagerSign.componentProp.hidden"
                      :rules="formData.projectManagerSign.rules">
                      <a-input v-model:value="formData.projectManagerSign.componentProp.defaultValue
                        " :disabled="formData.projectManagerSign.componentProp.disabled
    " :placeholder="formData.projectManagerSign.componentProp.placeholder
    " />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item :label="formData.projectManagerDate.label" class="hideLabel formTimedisplay" :name="[
                      formData.projectManagerDate.field,
                      'componentProp',
                      'defaultValue',
                    ]" v-if="!formData.projectManagerDate.componentProp.hidden"
                      :rules="formData.projectManagerDate.rules">
                      <a-date-picker v-model:value="formData.projectManagerDate.componentProp.defaultValue
                        " :disabled="formData.projectManagerDate.componentProp.disabled" :placeholder="formData.projectManagerDate.componentProp.placeholder
    " show-time type="date" value-format="YYYY-MM-DD" format="YYYY年MM月DD日" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </td>
          </tr>
          <tr>
            <td class="fontWightStyle">分管副总经理意见</td>
            <td colspan="5">
              <a-form-item style="margin-bottom: 10px" :label="formData.deputyGeneralManagerContent.label"
                class="hideLabel" :name="[
                  formData.deputyGeneralManagerContent.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.deputyGeneralManagerContent.componentProp.hidden"
                :rules="formData.deputyGeneralManagerContent.rules">
                <a-textarea v-model:value="formData.deputyGeneralManagerContent.componentProp.defaultValue"
                  :disabled="formData.deputyGeneralManagerContent.componentProp.disabled"
                  :placeholder="formData.deputyGeneralManagerContent.componentProp.placeholder" />
              </a-form-item>
              <div style="float: right; margin-top: 10px;">
                <a-row :gutter="16">
                  <a-col :span="12">
                    <a-form-item label="签字：" :name="[
                      formData.deputyGeneralManagerSign.field,
                      'componentProp',
                      'defaultValue',
                    ]" v-if="!formData.deputyGeneralManagerSign.componentProp.hidden"
                      :rules="formData.deputyGeneralManagerSign.rules">
                      <a-input v-model:value="formData.deputyGeneralManagerSign.componentProp.defaultValue
                        " :disabled="formData.deputyGeneralManagerSign.componentProp.disabled
    " :placeholder="formData.deputyGeneralManagerSign.componentProp.placeholder
    " />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item :label="formData.deputyGeneralManagerDate.label" class="hideLabel formTimedisplay" :name="[
                      formData.deputyGeneralManagerDate.field,
                      'componentProp',
                      'defaultValue',
                    ]" v-if="!formData.deputyGeneralManagerDate.componentProp.hidden"
                      :rules="formData.deputyGeneralManagerDate.rules">
                      <a-date-picker v-model:value="formData.deputyGeneralManagerDate.componentProp.defaultValue
                        " :disabled="formData.deputyGeneralManagerDate.componentProp.disabled" :placeholder="formData.deputyGeneralManagerDate.componentProp.placeholder
    " show-time type="date" value-format="YYYY-MM-DD" format="YYYY年MM月DD日" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="1" class="fontWightStyle">财务部新发票上传</td>
            <!-- <td colspan="5"></td> -->
            <td colspan="5">
              <span style="color: red;">* 请上传发票</span>
              <a-form-item style="margin-bottom: 10px" :label="formData.financeContent.label"
                class="hideLabel" :name="[
                  formData.financeContent.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.financeContent.componentProp.hidden"
                :rules="formData.financeContent.rules">
                <a-textarea v-model:value="formData.financeContent.componentProp.defaultValue"
                  :disabled="formData.financeContent.componentProp.disabled"
                  :placeholder="formData.financeContent.componentProp.placeholder" />
              </a-form-item>
              <div style="float: right; margin-top: 10px;">
                <a-row :gutter="16">
                  <a-col :span="12">
                    <a-form-item label="签字：" :name="[
                      formData.financeSign.field,
                      'componentProp',
                      'defaultValue',
                    ]" v-if="!formData.financeSign.componentProp.hidden"
                      :rules="formData.financeSign.rules">
                      <a-input v-model:value="formData.financeSign.componentProp.defaultValue
                        " :disabled="formData.financeSign.componentProp.disabled
    " :placeholder="formData.financeSign.componentProp.placeholder
    " />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item :label="formData.financeDate.label" class="hideLabel formTimedisplay" :name="[
                      formData.financeDate.field,
                      'componentProp',
                      'defaultValue',
                    ]" v-if="!formData.financeDate.componentProp.hidden"
                      :rules="formData.financeDate.rules">
                      <a-date-picker v-model:value="formData.financeDate.componentProp.defaultValue
                        " :disabled="formData.financeDate.componentProp.disabled" :placeholder="formData.financeDate.componentProp.placeholder
    " show-time type="date" value-format="YYYY-MM-DD" format="YYYY年MM月DD日" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </td>
          </tr>
          <tr>
            <td class="fontWightStyle">发起人发票确认</td>
            <td colspan="5">
              <a-form-item style="margin-bottom: 10px" :label="formData.initiatorContent.label"
                class="hideLabel" :name="[
                  formData.initiatorContent.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.initiatorContent.componentProp.hidden"
                :rules="formData.initiatorContent.rules">
                <a-textarea v-model:value="formData.initiatorContent.componentProp.defaultValue"
                  :disabled="formData.initiatorContent.componentProp.disabled"
                  :placeholder="formData.initiatorContent.componentProp.placeholder" />
              </a-form-item>
              <div style="float: right; margin-top: 10px;">
                <a-row :gutter="16">
                  <a-col :span="12">
                    <a-form-item label="签字：" :name="[
                      formData.initiatorSign.field,
                      'componentProp',
                      'defaultValue',
                    ]" v-if="!formData.initiatorSign.componentProp.hidden"
                      :rules="formData.initiatorSign.rules">
                      <a-input v-model:value="formData.initiatorSign.componentProp.defaultValue
                        " :disabled="formData.initiatorSign.componentProp.disabled
    " :placeholder="formData.initiatorSign.componentProp.placeholder
    " />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item :label="formData.initiatorDate.label" class="hideLabel formTimedisplay" :name="[
                      formData.initiatorDate.field,
                      'componentProp',
                      'defaultValue',
                    ]" v-if="!formData.initiatorDate.componentProp.hidden"
                      :rules="formData.initiatorDate.rules">
                      <a-date-picker v-model:value="formData.initiatorDate.componentProp.defaultValue
                        " :disabled="formData.initiatorDate.componentProp.disabled" :placeholder="formData.initiatorDate.componentProp.placeholder
    " show-time type="date" value-format="YYYY-MM-DD" format="YYYY年MM月DD日" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </td>
          </tr>
        </table>
        <div style="margin-top: 10pt;">
          <ul>
            <li>说明 1. 每月16日财务处理当月提交的发票红冲及重开业务；</li>
            <li style="padding-left: 30px">2. 财务部将开具的电子发票上传至本表单后，发起人即可进行发票进行审核及下载；</li>
            <li style="padding-left: 30px">3. 流程发起人确认开具的发票准确无误后需对本流程进行确认，并视为流程闭环。 </li>
          </ul>
        </div>
      </a-form>
    </a-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import dayjs from "dayjs";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");
const vForm = ref();
const locale = ref(zhCN);
const formData = reactive({
  applyCode: {
    type: "input",
    field: "applyCode",
    label: "编号",
    rules: [{ required: false }],
    componentProp: {
      defaultValue: '${applyCode}',
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  role: {
    type: 'input',
    field: 'role',
    label: '申请人角色（隐藏）',
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "${applyUserRole}",
      disabled: false,
      hidden: false,
      placeholder: ""
    }
  },
  applyUserName: {
    type: "input",
    field: "applyUserName",
    label: "申请人",
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "${applyUserName}",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  applyUserId: {
    type: "input",
    field: "applyUserId",
    label: "申请人ID",
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "${applyUserId}",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  applyUserDeptName: {
    type: "input",
    field: "applyUserDeptName",
    label: "申请人部门",
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "${applyUserDeptName}",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  applyUserDeptId: {
    type: "input",
    field: "applyUserDeptId",
    label: "申请人部门ID",
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "${applyUserDeptId}",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  
  applyTime: {
    type: "datepicker",
    field: "applyTime",
    label: "申请日期",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  contractType: {
    type: "select",
    field: "contractType",
    label: "合同类型",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "请选择",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [
        {label: '文博', value: '0'},
        {label: '翼康', value: '1'}
      ],
    },
  },
  projectName: {
    type: "input",
    field: "projectName",
    label: "项目名称",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  projectCode: {
    type: "input",
    field: "projectCode",
    label: "协议级项目编码",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  contractCode: {
    type: "input",
    field: "contractCode",
    label: "主合同编号",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  contractTaxRate: {
    type: "input",
    field: "contractTaxRate",
    label: "合同税率(%)",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option:[]
    },
  },
  contractContainPrice: {
    type: "input",
    field: "contractContainPrice",
    label: "合同总价（含税）",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option:[]
    },
  },
  contractExcludingPrice: {
    type: "input",
    field: "contractExcludingPrice",
    label: "合同总价（不含税）",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: true,
      hidden: false,
      option:[]
    },
  },
  taxesPrice: {
    type: "input",
    field: "taxesPrice",
    label: "合同税金（元）",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: true,
      hidden: false,
      option:[]
    },
  },
  ticketName: {
    type: "input",
    field: "ticketName",
    label: "收票方名称",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option:[]
    },
  },
  invoiceNumber: {
    type: "input",
    field: "invoiceNumber",
    label: "发票编码",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option:[]
    },
  },
  invoiceDate: {
    type: "datepicker",
    field: "invoiceDate",
    label: "开票日期",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  issuedAmount: {
    type: "input",
    field: "issuedAmount",
    label: "开具金额",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  redFlushType: {
    type: "radio",
    field: "redFlushType",
    label: "红冲类型",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "请选择",
      defaultValue: '',
      disabled: false,
      hidden: false,
      option: [
        { label: "付款方原因", value: "0" },
        { label: "我方原因", value: "1" },
      ],
    },
  },
  payerName: {
    type: "input",
    field: "payerName",
    label: "付款方名称",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  settlementAmount: {
    type: "input",
    field: "settlementAmount",
    label: "本次结算金额（元）",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  invoiceTaxRate: {
    type: "input",
    field: "invoiceTaxRate",
    label: "开票税率(%)",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  settlementExcludingAmount: {
    type: "input",
    field: "settlementExcludingAmount",
    label: "本次结算金额（不含税）",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: true,
      hidden: false,
    },
  },
  thisSettlementTax: {
    type: "input",
    field: "thisSettlementTax",
    label: "本次结算税金（元）",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: true,
      hidden: false,
    },
  },
  commonIncluding: {
    type: "input",
    field: "commonIncluding",
    label: "累计结算金额（含税）",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  commonExcluding: {
    type: "input",
    field: "commonExcluding",
    label: "累计结算（不含税）",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: true,
      hidden: false,
    },
  },
  settlementTax: {
    type: "input",
    field: "settlementTax",
    label: "累计结算税金（元）",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: true,
      hidden: false,
    },
  },
  householdName: {
    type: "input",
    field: "householdName",
    label: "户名",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  openingBank: {
    type: "input",
    field: "openingBank",
    label: "开户银行",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  bankNumber: {
    type: "input",
    field: "bankNumber",
    label: "行号",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  bankAddress: {
    type: "input",
    field: "bankAddress",
    label: "开户行地址",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  registrationNumber: {
    type: "input",
    field: "registrationNumber",
    label: "税务登记号",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  phone: {
    type: "input",
    field: "phone",
    label: "电话",
    rules: [{ required: true}],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  projectManagerContent: {
    type: 'textarea',
    field: 'projectManagerContent',
    label: '项目经理意见',
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: ""
    }
  },
  projectManagerSign: {
    type: 'input',
    field: 'projectManagerSign',
    label: '项目经理签字',
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: ""
    }
  },
  projectManagerDate: {
    type: 'datepicker',
    field: 'projectManagerDate',
    label: '项目经理签字日期',
    rules: [{ required: true }],
    componentProp: {
      placeholder: '',
      defaultValue: '',
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  deputyGeneralManagerContent: {
    type: 'textarea',
    field: 'deputyGeneralManagerContent',
    label: '分管副总经理意见',
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: ""
    }
  },
  deputyGeneralManagerSign: {
    type: 'input',
    field: 'deputyGeneralManagerSign',
    label: '分管副总经理签字',
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: ""
    }
  },
  deputyGeneralManagerDate: {
    type: 'datepicker',
    field: 'deputyGeneralManagerDate',
    label: '分管副总经理签字日期',
    rules: [{ required: true }],
    componentProp: {
      placeholder: '',
      defaultValue: '',
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  financeContent: {
    type: "textarea",
    field: "financeContent",
    label: "财务部意见",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  financeSign: {
    type: "input",
    field: "financeSign",
    label: "财务部签名",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  financeDate: {
    type: "datepicker",
    field: "financeDate",
    label: "财务部签名时间",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "请选择",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  initiatorContent: {
    type: 'textarea',
    field: 'initiatorContent',
    label: '发起人发票确认意见',
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: ""
    }
  },
  initiatorSign: {
    type: 'input',
    field: 'initiatorSign',
    label: '发起人发票确认签字',
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "",
      disabled: false,
      hidden: false,
      placeholder: ""
    }
  },
  initiatorDate: {
    type: 'datepicker',
    field: 'initiatorDate',
    label: '发起人发票确认签字日期',
    rules: [{ required: true }],
    componentProp: {
      placeholder: '',
      defaultValue: '',
      disabled: false,
      hidden: false,
      option: [],
    },
  },
});

// 监听合同税率
watch(()=>formData.contractTaxRate.componentProp.defaultValue, ()=>{
  if(formData.contractContainPrice.componentProp.defaultValue){
    formData.contractExcludingPrice.componentProp.defaultValue = (+formData.contractContainPrice.componentProp.defaultValue / ((+formData.contractTaxRate.componentProp.defaultValue)/100 + 1)).toFixed(2)+''
    formData.taxesPrice.componentProp.defaultValue = (+formData.contractContainPrice.componentProp.defaultValue / ((+formData.contractTaxRate.componentProp.defaultValue)/100 + 1) * ((+formData.contractTaxRate.componentProp.defaultValue)/100)).toFixed(2)+''
  }
  // 累计结算
  if(formData.commonIncluding.componentProp.defaultValue){
    formData.commonExcluding.componentProp.defaultValue = (+formData.commonIncluding.componentProp.defaultValue / ((+formData.contractTaxRate.componentProp.defaultValue)/100 + 1)).toFixed(2)+''
    formData.settlementTax.componentProp.defaultValue = (+formData.commonIncluding.componentProp.defaultValue / ((+formData.contractTaxRate.componentProp.defaultValue)/100 + 1) * ((+formData.contractTaxRate.componentProp.defaultValue)/100)).toFixed(2)+''
  }
})
// 监听合同总价（含税）
watch(()=>formData.contractContainPrice.componentProp.defaultValue, ()=>{
  if(formData.contractTaxRate.componentProp.defaultValue){
    formData.contractExcludingPrice.componentProp.defaultValue = (+formData.contractContainPrice.componentProp.defaultValue / ((+formData.contractTaxRate.componentProp.defaultValue)/100 + 1)).toFixed(2)+''
    formData.taxesPrice.componentProp.defaultValue = (+formData.contractContainPrice.componentProp.defaultValue / ((+formData.contractTaxRate.componentProp.defaultValue)/100 + 1) * ((+formData.contractTaxRate.componentProp.defaultValue)/100)).toFixed(2)+''
  }
})
// 监听本次结算金额
watch(()=>formData.settlementAmount.componentProp.defaultValue, ()=>{
  if(formData.invoiceTaxRate.componentProp.defaultValue){
    formData.settlementExcludingAmount.componentProp.defaultValue = (+formData.settlementAmount.componentProp.defaultValue / ((+formData.invoiceTaxRate.componentProp.defaultValue)/100 + 1)).toFixed(2)+''
    formData.thisSettlementTax.componentProp.defaultValue = (+formData.settlementAmount.componentProp.defaultValue / ((+formData.invoiceTaxRate.componentProp.defaultValue)/100 + 1) * ((+formData.invoiceTaxRate.componentProp.defaultValue)/100)).toFixed(2)+''
  }
})
// 监听开票税率
watch(()=>formData.invoiceTaxRate.componentProp.defaultValue, ()=>{
  if(formData.settlementAmount.componentProp.defaultValue){
    formData.settlementExcludingAmount.componentProp.defaultValue = (+formData.settlementAmount.componentProp.defaultValue / ((+formData.invoiceTaxRate.componentProp.defaultValue)/100 + 1)).toFixed(2)+''
    formData.thisSettlementTax.componentProp.defaultValue = (+formData.settlementAmount.componentProp.defaultValue / ((+formData.invoiceTaxRate.componentProp.defaultValue)/100 + 1) * ((+formData.invoiceTaxRate.componentProp.defaultValue)/100)).toFixed(2)+''
  }
})
// 监听累计结算金额  commonExcluding settlementTax
watch(()=>formData.commonIncluding.componentProp.defaultValue, ()=>{
  if(formData.contractTaxRate.componentProp.defaultValue){
    formData.commonExcluding.componentProp.defaultValue = (+formData.commonIncluding.componentProp.defaultValue / ((+formData.contractTaxRate.componentProp.defaultValue)/100 + 1)).toFixed(2)+''
    formData.settlementTax.componentProp.defaultValue = (+formData.commonIncluding.componentProp.defaultValue / ((+formData.contractTaxRate.componentProp.defaultValue)/100 + 1) * ((+formData.contractTaxRate.componentProp.defaultValue)/100)).toFixed(2)+''
  }
})
const submitForm = () => {
  return vForm.value.validate();
};
defineExpose({
  formData,
  submitForm,
});
</script>

<style scoped>
.yk_table .ant-form-item {
  margin-bottom: 0;
}

.yk_table .ant-input-number {
  width: 100%;
}

.yk_table td {
  padding: 10px;
}

::v-deep .hideLabel .ant-form-item-label {
  display: none !important;
}

::v-deep .formTimedisplay {
  display: inline-block !important;
  width: 100%;
}

::v-deep .formTimeSpan {
  vertical-align: text-top;
  display: inline-block;
  margin: 0 10px;
}

ul li {
  list-style-type: none;
}

.fontStyle {
  text-align: center;
  color: black;
  font-weight: bolder;
}
::v-deep .ant-input-affix-wrapper-disabled,
.ant-input-affix-wrapper[disabled],
.ant-input-disabled,
.ant-input[disabled],
.ant-picker.ant-picker-disabled,
.ant-select-disabled .ant-select:not(.ant-select-customize-input) .ant-select-selector{
  background: #fff !important;
  color: #666 !important;
}
::v-deep input[disabled],.ant-input-number-disabled {
  color: #666 !important;
  background-color: #fff !important;
}
.fontWightStyle{
  font-weight: bold;
}
::v-deep label{
  font-weight: bold !important;
}
</style>
